<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
        crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
          integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
          crossorigin=""></script>
    <script src="https://unpkg.com/leaflet@1.7.0/dist/leaflet.js"></script>
    <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
    <script src="https://unpkg.com/terraformer@1.0.8"></script>
    <script src="https://unpkg.com/terraformer-arcgis-parser@1.0.5"></script>
    <script src="https://unpkg.com/terraformer-wkt-parser@1.1.2"></script>
    <script src="https://unpkg.com/leaflet-canvas-marker@0.2.0"></script>
  <style>
		html, body {
			height: 100%;
			margin: 0;
		}
		.leaflet-container {
			height: 500px;
			width: 850px;
			max-width: 100%;
			max-height: 100%;
		}
	</style>
</head>
<div id="map"></div>
<!--<form action="http://localhost:8808/point/getByName" method="GET">-->
<!--  name: <input type="text" name="name">-->
<!--<input type="submit" value="Submit">-->
<!--</form>-->
名称: <input type="text" id="field1">
<button>名称查询</button>
<button>缓冲区查询</button>
<button>包含查询</button><br/>
<br/>
wkt: <input type="text" id="field3">
<button id="submit" onclick="loadWkt();">Load WKT into Map</button>
<button>相交</button>
<button>裁剪</button>
用地类型: <input type="text" id="field2">
<button>合并</button>
<script>
var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
});
var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});

const redsvg='<svg t="1621166776642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1407" width="200" height="200"><path d="M512 85.333333c-164.949333 0-298.666667 133.738667-298.666667 298.666667 0 164.949333 298.666667 554.666667 298.666667 554.666667s298.666667-389.717333 298.666667-554.666667c0-164.928-133.717333-298.666667-298.666667-298.666667z m0 448a149.333333 149.333333 0 1 1 0-298.666666 149.333333 149.333333 0 0 1 0 298.666666z" fill="#FF3D00" p-id="1408"></path></svg>';

const greensvg='<svg t="1662687226503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2848" width="200" height="200"><path d="M512 85.333333c-164.949333 0-298.666667 133.738667-298.666667 298.666667 0 164.949333 298.666667 554.666667 298.666667 554.666667s298.666667-389.717333 298.666667-554.666667c0-164.928-133.717333-298.666667-298.666667-298.666667z m0 448a149.333333 149.333333 0 1 1 0-298.666666 149.333333 149.333333 0 0 1 0 298.666666z" fill="#1afa29" p-id="2849"></path></svg>';

const yellowsvg='<svg t="1662687226503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2848" width="200" height="200"><path d="M512 85.333333c-164.949333 0-298.666667 133.738667-298.666667 298.666667 0 164.949333 298.666667 554.666667 298.666667 554.666667s298.666667-389.717333 298.666667-554.666667c0-164.928-133.717333-298.666667-298.666667-298.666667z m0 448a149.333333 149.333333 0 1 1 0-298.666666 149.333333 149.333333 0 0 1 0 298.666666z" fill="#f4ea2a" p-id="2849"></path></svg>';

var redIcon = L.icon({
  iconUrl: 'data:image/svg+xml,' + encodeURIComponent(redsvg),
  iconSize: [32,32],
  iconAnchor: [16,32]
});

var greenIcon = L.icon({
  iconUrl: 'data:image/svg+xml,' + encodeURIComponent(greensvg),
  iconSize: [32,32],
  iconAnchor: [16,32]
});

var yellowIcon = L.icon({
  iconUrl: 'data:image/svg+xml,' + encodeURIComponent(yellowsvg),
  iconSize: [32,32],
  iconAnchor: [16,32]
});

L.Marker.prototype.options.icon = redIcon;

var littleton = L.marker([39.8492789996262, 116.331205999857]).bindPopup('铁路卫生学校食堂'),
    denver    = L.marker([39.8496379999938,116.600583999952]).bindPopup('吴记全羊汤'),
    aurora    = L.marker([40.009848, 116.395892]).bindPopup('This is A'),
    golden    = L.marker([39.929931, 116.475494]).bindPopup('This is B'),
    demo      = L.marker([36.929931, 118.475494]).bindPopup('This is demo');


var cities = L.layerGroup([littleton, denver, aurora, golden]);
var myPolygons =L.layerGroup();

var map = L.map('map', {
  center: [21.081083, 110.172729],
  zoom: 10,
  layers:[osm, cities],
  preferCanvas: true
});

map.setView([21.280844, 110.220337], 8);

var baseMaps = {
    "OpenStreetMap": osm,
    "Mapbox Streets": streets
};

var overlayMaps = {
    "Points": cities
};

var Ploygonlay  = {
  "图斑":myPolygons
}

var layerControl = L.control.layers(baseMaps,overlayMaps).addTo(map);

var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');

var parks = L.layerGroup([crownHill, rubyHill]);

layerControl.addOverlay(parks, "Parks");

var geoJsonPolygon=omnivore.wkt.parse('POLYGON ((109.663696 21.556987, 109.998779 22.00078, 110.603027 21.990593, 110.927124 21.434321, 110.509644 20.521359, 110.361328 20.315438, 109.910889 20.263915, 109.684245 20.995259, 109.663696 21.556987))').addTo(map);

var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};

var myStyle1 = {
    "color": "#FF1F00",
    "weight": 5,
    "opacity": 0.65
};

var myStyle2 = {
    "color": "#00FF66",
    "weight": 5,
    "opacity": 0.65
};

var myStyle3 = {
    "color": "#FFFF58",
    "weight": 5,
    "opacity": 0.65
};

var geojsonMarkerOptions = {
    radius: 500,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

var myGeoJSON;

var wktString;

map.on('pm:create',e=>{
    console.log(e);
	myGeoJSON = e.layer.toGeoJSON();
	wktString= Terraformer.WKT.convert(myGeoJSON.geometry);
    console.log(wktString);
});


map.pm.addControls({
  position: 'topleft',
  drawCircle: false,
});

function loadWkt() {
var wkt=document.getElementById("field3").value;
var geojson = Terraformer.WKT.parse(wkt);
var layer = L.geoJson(geojson, {
               style: myStyle
               }).addTo(map);
        wktString= wkt;
}


const btns = document.querySelectorAll('button');
//根据名称进行点查询
btns[0].onclick=function(){
var dlmc=document.getElementById("field1").value;
  axios({
    method:'GET',
    url:'http://172.16.83.176:8808/point/getByName?dlmc='+dlmc,
  }).then(response=>{
    console.log(response);
var ciLayer = L.canvasIconLayer({}).addTo(map);
var icon = redIcon;
for (var i = 0; i < response.data.length; i++) {
  var geojson = Terraformer.WKT.parse(response.data[i].shape);
    var layer = L.geoJson(geojson, {});
       var marker = L.marker(layer.getBounds().getCenter(), { icon: icon })
         .bindPopup("id:"+response.data[i].objectid);    //绑定气泡窗口
      ciLayer.addLayer(marker);
     }
  });
}
//点缓冲区查询
btns[1].onclick=function(){
L.geoJSON(myGeoJSON, {
    pointToLayer: function (feature, latlng) {
        return L.circle(latlng, geojsonMarkerOptions);
    }
}).addTo(map);
  axios({
    method:'GET',
    url:'http://172.16.83.176:8808/point/getPointsByBuffer?wkt='+wktString,
  }).then(response=>{
    console.log(response);
var ciLayer = L.canvasIconLayer({}).addTo(map);
var icon = greenIcon;
for (var i = 0; i < response.data.length; i++) {
       var geojson = Terraformer.WKT.parse(response.data[i].shape);
    var layer = L.geoJson(geojson, {});
       var marker = L.marker(layer.getBounds().getCenter(), { icon: icon })
         .bindPopup("id:"+response.data[i].objectid);    //绑定气泡窗口
      ciLayer.addLayer(marker);
     }
  });
}
//点空间包含查询
btns[2].onclick=function(){
  axios({
    method:'GET',
    url:'http://172.16.83.176:8808/point/getPointsByPolygon?wkt='+wktString,
  }).then(response=>{
    console.log(response);
var ciLayer = L.canvasIconLayer({}).addTo(map);
var icon = yellowIcon;
for (var i = 0; i < response.data.length; i++) {
    var geojson = Terraformer.WKT.parse(response.data[i].shape);
    var layer = L.geoJson(geojson, {});
    var marker = L.marker(layer.getBounds().getCenter(), { icon: icon })
         .bindPopup("id:"+response.data[i].objectid);    //绑定气泡窗口
     ciLayer.addLayer(marker);
     }
  });
}
//多边形相交
btns[4].onclick=function(){
  axios({
    method:'GET',
    url:'http://172.16.83.176:8808/polygon/getPolygonByIntersects?wkt='+wktString,
  }).then(response=>{
    console.log(response);
    if(response.data.length<10000){
    var geojsons = []
            for (var i = 0; i < response.data.length; i++) {
                var geojson = Terraformer.WKT.parse(response.data[i].shape);
                geojsons.push(geojson);
                geojson.id=response.data[i].objectid;
                geojson.dlmc=response.data[i].dlmc;
            }
            var layer = L.geoJson(geojsons, {
                style: myStyle1,
                onEachFeature: onEachFeature
            }).addTo(map);
        function onEachFeature(feature, layer) {
            var popupContent = "<p>id:" +
                feature.id + "</p>"+"<p>用地类型："+feature.dlmc+"</p>";
            if (feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
            }
            layer.bindPopup(popupContent);
        }
        }
        else{
    var ciLayer = L.canvasIconLayer({}).addTo(map);
       var geojsons = [];
       var markers = [];
       for (var i = 0; i < response.data.length; i++) {
            var geojson = Terraformer.WKT.parse(response.data[i].shape);
            var layer = L.geoJson(geojson, {});
            var temp=response.data[i].objectid;
            var marker = L.marker(layer.getBounds().getCenter(), {icon: redIcon,title:response.data[i].objectid}).bindPopup("id:"+temp)
            markers.push(marker);
        }
        ciLayer.addLayers(markers);
        map.setView(map.getCenter());
        ciLayer.addOnClickListener(function (e, data) {
        console.log("click", data[0].data.options.title);
        var id=data[0].data.options.title;
        axios({
        method:'GET',
        url:'http://172.16.83.176:8808/polygon/getMyPolygonById?tempid='+id,
        }).then(response=>{
        console.log(response);
        var geojson = Terraformer.WKT.parse(response.data.shape);
        var layer = L.geoJson(geojson, {
                style: myStyle3
             }).addTo(map);
    });
});
}
});
}
//多边形裁剪
btns[5].onclick=function(){
  axios({
    method:'GET',
    url:'http://172.16.83.176:8808/polygon/getPolygonByClipping?wkt='+wktString,
  }).then(response=>{
    console.log(response);
    if(response.data.length<10000){
    var geojsons = []
            for (var i = 0; i < response.data.length; i++) {
                var geojson = Terraformer.WKT.parse(response.data[i].shape);
                geojsons.push(geojson);
                geojson.id=response.data[i].objectid;
                geojson.dlmc=response.data[i].dlmc;
            }
            var layer = L.geoJson(geojsons, {
                style: myStyle2,
                onEachFeature: onEachFeature
            }).addTo(map);
        function onEachFeature(feature, layer) {
            var popupContent = "<p>id:" +
                feature.id + "</p>"+"<p>用地类型："+feature.dlmc+"</p>";
            if (feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
            }
            layer.bindPopup(popupContent);
        }
        }
       else{
       var ciLayer = L.canvasIconLayer({}).addTo(map);
       var geojsons = [];
       var markers = [];
       for (var i = 0; i < response.data.length; i++) {
            var geojson = Terraformer.WKT.parse(response.data[i].shape);
            var layer = L.geoJson(geojson, {});
            var temp=response.data[i].objectid;
            var marker = L.marker(layer.getBounds().getCenter(), {icon: greenIcon,title:response.data[i].objectid}).bindPopup("id:"+temp)
            markers.push(marker);
        }
        ciLayer.addLayers(markers);
        map.setView(map.getCenter());
        ciLayer.addOnClickListener(function (e, data) {
        console.log("click", data[0].data.options.title);
        var id=data[0].data.options.title;
        axios({
        method:'GET',
        url:'http://172.16.83.176:8808/polygon/getMyPolygonByIdNew?tempid='+id,
        }).then(response=>{
        console.log(response);
        var geojson = Terraformer.WKT.parse(response.data.shape);
        var layer = L.geoJson(geojson, {
                style: myStyle3
             }).addTo(map);
    });
});
        }
  });
}
//多边形合并
btns[6].onclick=function(){
var dlmc=document.getElementById("field2").value;
  axios({
    method:'GET',
    url:'http://172.16.83.176:8808/polygon/getPolygonByUnion?dlmc='+dlmc,
  }).then(response=>{
    console.log(response);
    var geojsons = [];
    var geojson = Terraformer.WKT.parse(response.data);
    geojsons.push(geojson)
    var layer = L.geoJson(geojsons, {
                style: myStyle3,
                onEachFeature: onEachFeature
            }).addTo(map);
        function onEachFeature(feature, layer) {
            var popupContent = "<p>" +
                dlmc + "</p>";
            if (feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
            }
            layer.bindPopup(popupContent);
        }
  });
  }
function demo(){
  var responsecontent;
  // 向给定ID的用户发起请求
  axios.get('http://172.16.83.176:8808/point/getByName?name=包子')
    .then(function (response) {
      // 处理成功情况
      console.log(response);
    })
    .catch(function (error) {
      // 处理错误情况
      console.log(error);
    })
    .then(function () {
      // 总是会执行
      responsecontent=response.data.data;
      document.write(responsecontent);
    });
  }
</script>


